<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All User Roles
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Docs navigation">

                <div class="card card-body">
                    <div class="input-group mr-sm-2 mb-3">
                        <div class="input-group-text"><i class="fas fa-user-tag"></i></div>
                        <input type="text" class="form-control" ng-model="role.name" ng-enter="createRole()"
                            placeholder="Enter new role name...">

                        <a href="#" class="btn btn-primary px-4 text-white" ng-click="createRole()">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                    <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                </div>
            </nav>
        </aside>


        <!-- ----------------------------------------------------------- -->


        <div class="content-body py-3 pe-3">
            <div class="card">
                <div class="card-body">
                    <!-- <div class="row justify-content-end mb-3">
                <div class="col-4">
                </div>
            </div> -->
                    <table class="table table-hover" cellspacing="0">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="col">
                                    Role Name
                                </th>
                                <th scope="col" class="col">
                                    Normalized Name
                                </th>
                                <th scope="col" class="col">
                                    Id
                                </th>
                                <th scope="col" class="col">
                                    Concurrency Stamp
                                </th>

                                <th scope="col"  class="col"></th>
                            </tr>
                        </thead>
                        <tbody class="sortable" ng-init="getList()">
                            <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="role"
                                sort-model-id="{{item.id}}">
                                <td>
                                    <small ng-bind="item.name"></small>
                                </td>
                                <td>
                                    <small ng-bind="item.normalizedName"></small>
                                </td>
                                <td>
                                    <small ng-bind="item.id" class="text-black-50"></small>
                                </td>
                                <td>
                                    <small ng-bind="item.concurrencyStamp" class="text-black-50"></small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                        aria-label="Actions">
                                        <a href="/portal/role/details/{{item.id}}" class="btn btn-link text-primary">
                                            <span class="fa fa-pen"></span>
                                        </a>
                                        <a ng-click="remove(item.name);" class="btn btn-link text-danger">
                                            <span class="fas fa-trash-alt"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="card-body">
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                        ul-class="pagination justify-content-end m-0" a-class="page-link"
                        paging-action="getList(page-1)" scroll-top="true">
                </div>
            </div>
        </div>

    </div>
</div>